<template>
	<view class="container" style="padding-bottom: 100px" v-if="isLoaded">
		<view class="tabs" style="background-color: #fff">
			<u-tabs
				:list="[
					{
						id: 1,
						text: `会员设置`
					},
					{
						id: 2,
						text: `微餐厅设置`
					}
				]"
				lineColor="#F3C45D"
				lineWidth="30"
				keyName="text"
				:activeStyle="activeStyle"
				@click="onTabClick($event)"
			></u-tabs>
		</view>
		<view class="content" style="padding: 30rpx 30rpx 120rpx; background-color: #fff">
			<u-transition mode="fade-right" :show="type == 1" v-if="type == 1">
				<li-form ref="form">
					<uni-section title="积分规则设置" title-color="#f3c45d" titleFontSize="32rpx">
						<template #decoration>
							<view class="decoration"></view>
						</template>
					</uni-section>
					<li-form-item label-width="80" label="开启积分功能">
						<li-picker
							prop="enableIntegral"
							v-model="form.enableIntegral"
							:rangeList="[
								{
									id: true,
									text: `开启`
								},
								{
									id: false,
									text: `不开启`
								}
							]"
						/>
					</li-form-item>
					<li-form-item label-width="80" label="规则1、单品积分规则设置" class="fs12">
						<li-picker
							class="fs14"
							v-model="form.isFoodIntegral"
							prop="isFoodIntegral"
							:rangeList="[
								{
									id: true,
									text: `开启`
								},
								{
									id: false,
									text: `不开启`
								}
							]"
						/>

						<text class="ml20" type="info">(说明:按菜品资料积分率积分)</text>
					</li-form-item>
					<li-form-item label-width="80" label="规则2、消费金额积分比例" class="fs12">
						<view style="display: flex; align-items: center">
							<li-input v-model="form.consumeIntegral" prop="consumeIntegral" rule="float" v-on:change="onBlurEvent($event)" />
							<text class="f1" style="text-wrap: nowrap; white-space: nowrap; margin-left: 10rpx">积分(消费多少元积1分)</text>
						</view>
					</li-form-item>
					<li-form-item label-width="100" label="规则3、特价菜品积分设置" class="fs12">
						<view>
							<li-input class="fs14" v-model="form.specialIntegral" prop="specialIntegral" rule="float" v-on:change="onBlurEvent($event)" />
							<text class="fs12" style="text-wrap: nowrap; white-space: nowrap">积分(消费多少元积1分, -1表示特价菜不积分)</text>
						</view>
					</li-form-item>
					<li-form-item label-width="80" label="规则4、积分抵现规则设置" prop="integralToCash" class="fs12">
						<view style="display: flex; align-items: center">
							<li-input prop="integralToCash" v-model="form.integralToCash" rule="float" v-on:change="onBlurEvent($event)" />
							<text style="text-wrap: nowrap; white-space: nowrap; margin-left: 10rpx" class="fs12 f1">积分抵现金(扣减多少积分抵1元)</text>
						</view>
					</li-form-item>
					<li-form-item label-width="80" label="规则5、关联子母卡积分" prop="parentIntegral">
						<view style="display: flex; align-items: center">
							<li-input v-model="form.parentIntegral" prop="parentIntegral" rule="float" v-on:change="onBlurEvent($event)" />
							<text style="text-wrap: nowrap; white-space: nowrap; margin-left: 10rpx" class="fs12 f1">主卡积分时关联卡是否同时积分</text>
						</view>
					</li-form-item>
					<uni-section title="消费规则设置" title-color="#f3c45d" titleFontSize="32rpx">
						<template #decoration>
							<view class="decoration"></view>
						</template>
					</uni-section>
					<li-form-item label-width="140" label="赠送帐户消费规则">
						<li-picker
							:rangeKey="`label`"
							:rangeValue="`value`"
							:rangeList="[
								{ label: `优先使用赠送金额`, value: 1 },
								{ label: `优先使用本金`, value: 2 },
								{ label: `赠送金额和本金按比例使用`, value: 3 }
							]"
							v-model="form.giftConsumRuleType"
						/>
					</li-form-item>
					<li-form-item v-if="form.giftConsumRuleType == 3" label="消费比例">
						<view style="display: flex; align-items: center">
							<li-input prop="giftproportion" v-model="form.giftproportion" class="f1" rule="int" v-on:change="onBlurEvent($event)" />
							<text style="margin: 0 8px">:</text>
							<li-input prop="rechargeProportion" v-model="form.rechargeProportion" class="f1" rule="int" v-on:change="onBlurEvent($event)" />
						</view>
					</li-form-item>
				</li-form>
			</u-transition>
			<u-transition mode="fade-right" :show="type == 2" v-else>
				<li-form>
					<uni-section title="微餐厅设置" title-color="#f3c45d" titleFontSize="32rpx">
						<template #decoration>
							<view class="decoration"></view>
						</template>
					</uni-section>
					<li-form-item label="点餐模式">
						<li-picker
							prop="orderType"
							:rangeList="[
								{
									id: 1,
									text: `快餐模式`
								},
								{
									id: 2,
									text: `开台模式`
								}
							]"
							v-model="storeSettingForm.orderType"
						></li-picker>
					</li-form-item>

					<li-form-item label="是否和收银前台同步" v-if="storeSettingForm.orderType == 1">
						<li-picker prop="isSynPos" :rangeList="booleanEnum" v-model="storeSettingForm.isSynPos"></li-picker>
					</li-form-item>

					<li-form-item v-if="storeSettingForm.orderType == 2" label="启用选择就餐人数">
						<li-picker
							prop="isSelectPerson"
							v-model="storeSettingForm.isSelectPerson"
							:rangeList="[
								{
									id: true,
									text: `启用`
								},
								{
									id: false,
									text: `不启用`
								}
							]"
						/>
					</li-form-item>

					<li-form-item label="启用外卖">
						<li-picker
							prop="isTakeout"
							v-model="storeSettingForm.isTakeout"
							:rangeList="[
								{
									id: true,
									text: `启用`
								},
								{
									id: false,
									text: `不启用`
								}
							]"
						></li-picker>
					</li-form-item>
				</li-form>
			</u-transition>
		</view>

		<li-bottom-btns :zIndex="10" :mode="mode" :showDel="false" v-on:btnDelClick="btnDelClick" v-on:btnEditOrSaveSubmitClick="btnEditOrSaveSubmitClick" />
	</view>
</template>
<script>
import liFormMixin from '../../../mixins/liFormMixin';
import dateUtils from '../../../utils/date.js';
import { transferTypeEnum, transfer } from '../../../common/dataTransfer.js';
import { checkerType, modeEnum, booleanEnum, weekEnumable, couponTypeEnum } from '../../../constants/normalConstants.js';
import { corpId, storeId } from '../../../constants/apiConstants.js';

import { liValidateData, validateTypeEnum } from '../../../utils/liValidator.js';
import { uHideLoading, uSetNavigationBarTitle, uShowLoading, uSwitchTab, umodal, utoast } from '../../../utils/uniUtils.js';

import { EditSUserIntegralRules, GetPlatformSetting, Editstoresetting } from '../../../common/modules/m.js';
import { toastIconEnum } from '../../../constants/uiConstants.js';
export default {
	mixins: [liFormMixin],
	async mounted() {
		try {
			uShowLoading();
			uSetNavigationBarTitle('平台设置');
			const {
				data: { userintegralrule, storeSetting }
			} = await GetPlatformSetting();
			this.form = userintegralrule;
			this.storeSettingForm = storeSetting;
			this.isLoaded = true;
			uHideLoading;
		} catch (error) {
			console.log(error, 'error');
			uSwitchTab('/pages/tabBar/staging');
		}
	},

	data() {
		return {
			modeEnum,
			weekEnumable,
			booleanEnum,
			couponTypeEnum,
			subject: '活动',
			rootRoute: 'workbench',
			routeName: 'couponScan',
			form: null,
			storeSettingForm: null,
			activeStyle: {
				color: '#F3C45D'
			},
			mode: modeEnum.edit,
			isLoaded: false,
			id: null,
			getFn: GetPlatformSetting,
			addFn: null,
			delFn: null,
			editFn: null,
			popLeftFn: null,
			popLeftList: [],
			popPageFn: null,
			popPageList: [],
			otherDataFns: [],
			/* form */
			form: null,
			/* popup */
			show: false,
			// transfer rules
			transferRules: [
				{
					name: 'giftproportion',
					type: transferTypeEnum.int
				},
				{
					name: 'rechargeProportion',
					type: transferTypeEnum.int
				},
				{
					name: 'consumeIntegral',
					type: transferTypeEnum.float
				},
				{
					name: 'specialIntegral',
					type: transferTypeEnum.float
				},
				{
					name: 'integralToCash',
					type: transferTypeEnum.float
				},
				{
					name: 'parentIntegral',
					type: transferTypeEnum.float
				}
			],
			//check rules
			rules: {
				giftproportion: {
					asyncValidator: (_rule, value, _callback) =>
						new Promise((resolve, reject) => {
							if (this.form.giftConsumRuleType == 3 && value < 1) {
								reject('赠送金额比例必须为正数！');
							}
							resolve(true);
						})
				},
				rechargeProportion: {
					asyncValidator: (_rule, value, _callback) =>
						new Promise((resolve, reject) => {
							if (this.form.giftConsumRuleType == 3 && value < 1) {
								reject('本金比例必须为正数！');
							}
							resolve(true);
						})
				}
			},
			lock: false,

			/* extra data */
			type: 1,
			popPageList: []
			/* extra rules */

			/* extra transfer */
		};
	},

	methods: {
		async onBlurEvent(e) {
			this.formBlur(e, this);
		},

		async getOtherData() {
			// ..
		},

		async btnEditOrSaveSubmitClick() {
			this.form = transfer(this.form, this.transferRules);

			try {
				await liValidateData(this.rules, this.form);
			} catch (error) {
				console.log('error', error);
				await utoast(error, toastIconEnum.none);
				return;
			}

			if (this.lock) {
				return;
			}

			if (!(await umodal('确认要提交吗？'))) {
				return;
			}

			if ((await EditSUserIntegralRules(this.form)).code == 0 && (await Editstoresetting(this.storeSettingForm)).code == 0) {
				await utoast('操作成功');
				setTimeout(() => {
					uSwitchTab(`/pages/tabBar/staging`);
				}, 1000);
			} else {
				setTimeout(() => {
					this.lock = false;
				}, 2000);
			}
		},

		/* extra methods */

		onTabClick: function (e) {
			this.type = e.id;
		}
		// method put on the top
	}
};
</script>
<style lang="scss" scoped>
@import '~@/static/styles/commonStyle.scss';

::v-deep .uni-section {
	margin-bottom: 8px;
}
.decoration {
	height: 30rpx;
	width: 4rpx;
	background-color: #f3c45d;
	border: 10rpx;
	margin-right: 20rpx;
	margin-left: -10rpx;
}
</style>
